<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>添加地址</title>
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="css/my_address.css">
</head>
<body>
<header class="aui-bar aui-bar-nav aui-bar-top">
    <div class="aui-pull-left aui-btn goBack">
        <span class="aui-iconfont aui-icon-left"></span>
    </div>
    <div class="aui-title">地址列表</div>
</header>
<section id="app">
    <router-view>

    </router-view>
</section>
<script type="text/javascript" src="../../js/zepto.min.js"></script>
<script type="text/javascript" src="../../js/api.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script type="text/javascript" src="../../js/vue-router.min.js"></script>
<script type="text/javascript" src="../../js/aui-toast.js" ></script>
<script type="text/javascript" src="./js/my_address.js"></script>

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="../../js/weixin.js" ></script>
<script type="text/javascript">
    var myAddress = Vue.component('my-address',{
        data:{
           defaultInfo:true,
           addressList:[],//地址列表
        },
        methods:{
            goAddRegion:function(){//添加地址
                window.location.href = "../add_region.html";
            },
            goPopUp: function () {//跳转到编辑页面
                this.$router.push('/goPopUp/');
            },
            deleteBtn:function(){  //删除地址
                $(".address").remove()
            },
            checkBtn:function(){
                myAddress.defaultInfo=!myAddress.defaultInfo;
            }
        },
        template:`
            <div>
   <div class="aui-padded-l-5 address">
      <div class="aui-margin-10">
           <div>
               <div class="aui-pull-left">万征</div>
               <div class="aui-pull-right">130000000</div>
          </div>
      </div>
       <div style="clear:both"></div>
       <div class="aui-border-b aui-margin-10">广东省深圳市南山区</div>
      <div class="aui-margin-10">
          <div class="aui-pull-left" v-on:click="checkBtn">
              <label><input class="aui-radio" type="radio"  v-bind:checked="myAddress.defaultInfo"> 默认地址</label>
          </div>
          <div class="aui-pull-right">
               <i class="aui-iconfont aui-icon-cert"></i>
               <span v-on:click="goPopUp()">编辑</span>
               <i class="aui-iconfont aui-icon-trash"></i>
               <span v-on:click="deleteBtn()">删除</span>
         </div>
      </div>
   </div>
     <p><div class="aui-btn aui-btn-info addBtn" v-on:click=" goAddRegion()">添加地址</div></p>
            </div>
        `,
    });
    var myPopUp = Vue.component('my-pop-up',{
        data: function () {
            return {

            }
        },
        methods:{
            saveBtn:function(){
                    //跳转到地址列表
                    this.$router.push('/goAddress')
                }
        },

        template:`
        <div>
   <div class="aui-content aui-margin-b-15 aui-margin-t-10">
    <ul class="aui-list aui-form-list">
        <li class="aui-list-item">
            <div class="aui-list-item-inner  aui-border-b">
                <div class="aui-list-item-label">
                    姓名:
                </div>
                <div class="aui-list-item-input ">
                    <input type="text">
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner  aui-border-b">
                <div class="aui-list-item-label">
                   电话:
                </div>
                <div class="aui-list-item-input">
                    <input type="tel">
                </div>
            </div>
        </li>
         <li class="aui-list-item">
            <div class="aui-list-item-inner  aui-border-b">
                <div class="aui-list-item-label">
                    地址：
                </div>
                <div class="aui-list-item-input">
                    <input type="password">
                </div>
            </div>
        </li>
        </ul>
        </div>
      <p><div class="aui-btn aui-btn-info  addBtn" v-on:click="saveBtn()">保存</div></p>
        </div>
        `
    })
    //配置路由词典
    const myRoutes = [
        {path:'',component:myAddress},
        {path:'/goAddress',component:myAddress},
        {path:'/goPopUp',component:myPopUp},
//没有匹配到上述任何一个路由地址，跳转到404页面
    ]
    const myRouter = new VueRouter({
        routes:myRoutes
    })
    var xpHome = new Vue({
        router:myRouter,
        el:'#app',
        data:{
        },
        methods: {

//            deleteBtn:function(){
//                $(".address").remove()
//            }
        }
    });



</script>
</body>
</html>